<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"/>
    <title>##page.title##</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/layui/2.8.8/css/layui.css" />
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            height: 100vh;
        }

        .logo {
            flex-shrink: 0;
            width: 124px;
            height: 45px;
            display: inline-block;
            background: url() 0 0/100% no-repeat;
        }

        /* 顶部描述 */
        .subtitle .describe {
            color: #2c3e50;
            text-align: start;
            font-size: 16px;
            font-weight: bold;
        }

        .subtitle .slogan {
            color: #2c3e50;
            text-align: start;
            font-size: 12px;
        }

        /* 主体内容 */
        .container {
            display: flex;
            flex: 1;
            overflow: hidden;
        }

        /* 左边菜单 */
        #menu-sidebar {
            width: auto;
            min-width: 200px;
            max-width: 300px;
            background-color: white;
            overflow-y: auto;
            padding: 10px;
        }

        #menu-sidebar ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }

        #menu-sidebar ul li {
            cursor: pointer;
            transition: background-color 0.3s;
        }

        #menu-sidebar ul a {
            color: black;
            text-decoration: none;
        }

        #menu-sidebar ul a:hover {
            text-decoration: underline;
            color: #13bf69;
        }

        #menu-sidebar ul a.active {
            text-decoration: underline;
            color: #72bf13 !important;
        }

        #menu-sidebar ul a b.active {
            text-decoration: underline;
            color: #72bf13 !important;
        }

        #menu-sidebar ul a text.active {
            text-decoration: underline;
            color: #72bf13 !important;
        }

        #menu-sidebar ul text {
            color: #2c3e50;
        }

        #menu-sidebar ul text:hover {
            color: #13bf69;
        }

        /* 右边内容 */
        #article-content {
            flex: 1;
            padding: 20px;
            background-color: white;
            overflow-y: auto;
        }

        article a {
            pointer-events: none;
            cursor: not-allowed;
            text-decoration: none;
        }

        article h1 {
            font-size: 24px;
        }

        article h2 {
            font-size: 22px;
        }

        article h3 {
            font-size: 20px;
        }

        article h4 {
            font-size: 18px;
        }

        article h5 {
            font-size: 16px;
        }

        article h6 {
            font-size: 14px;
        }

        article p {
            margin: 1em 0;
        }

        article p code {
            background: #eee;
            border: 1px solid #ccc;
        }

        article p strong {
            color: #f00;
        }

        article pre {
            background: #eee;
            border-left: solid 2px #3c0;
            font-size: 10pt;
            margin: 1em 0;
            padding: .5em 0 .5em 1em;
            overflow-x: auto;
            overflow-y: padding;
        }

        article blockquote {
            background: rgba(27,31,35,.05);
            border: dashed 1px #777;
            border-left: solid 2px #777;
            border-radius: 6px;
            color: #476582;
            margin: 0;
            padding: 5px 5px 5px 1em;
            overflow-x: auto;
            overflow-y: padding;
        }

        article ul, article ol {
            padding-left: 2em;
        }

        article table {
            border: 1px solid #42b883;
            margin-top: 10px;
            margin-bottom: 5px;
            padding: 5px;
            width: 100%;
            border-collapse: collapse;
        }

        article thead {
            background-color: #f2f2f2;
            border: 2px solid #42b883;
        }

        article th, td {
            padding: 10px;
            text-align: center;
        }

        article th {
            border: 1px solid #42b883;
        }

        article tr, td {
            border: 1px solid #42b883;
        }

        .layui-timeline-axis {
            background-color: #a8b716;
        }
    </style>
</head>
<body>
<!-- 顶部标题 -->
<div style="display: flex;align-items: center;justify-content: space-between;background-color: #000;padding: 10px;">
    <div style="display: flex;align-items: center;">
        <div class="logo"></div>
        <text style="margin-left: 20px;color: white;font-size: 24px;font-weight: bold;">##page.title##</text>
    </div>
    <text style="color: #1cc372;font-size: 18px;">For-<i>##page.partnerName##</i>(<span id="userName"></span>)</text>
</div>
<!-- 顶部描述 -->
<div style="display: flex;align-items: center;justify-content: space-between;padding: 20px;border-bottom: 1px solid #eaecef;">
    <div class="subtitle">
        <div class="describe">##page.describe##</div>
        <div class="slogan">##page.slogan##</div>
    </div>
    <div style="display: flex;align-items: center;justify-content: center;" id="updateRecordSdkDl">
        <div style="color: goldenrod;font-size: 18px;cursor: pointer;margin-right: 2px;">更新记录/SDK下载</div>
        <i data-feather="download" style="width: 20px; height: 20px; color: goldenrod;cursor: pointer;z-index: 9999;" title="SDK下载"></i>
    </div>
</div>
<!-- 主体内容 -->
<div class="container">
    <!-- 左边菜单 -->
    <div id="menu-sidebar"></div>
    <!-- 右边内容 -->
    <article id="article-content">##page.article##</article>
</div>
</body>
<script src="https://releases.jquery.com/git/jquery-git.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/layui/2.8.8/layui.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/feather-icons/4.29.0/feather.min.js"></script>
<script>
    var serverDomainUrl = window.location.protocol + "//" + window.location.hostname
    var curStrategyFlag = "##page.partnerFlag##"
    var curSelectLiId = null;
    /*备用文章目录动态生成*/
    var articleDirectoryBuild = function () {
        var articleChildren = function children(childNodes, reg) {
                var result = [], isReg = typeof reg === 'object', isStr = typeof reg === 'string', node, i, len;
                for (i = 0, len = childNodes.length; i < len; i++) {
                    node = childNodes[i];
                    if ((node.nodeType === 1 || node.nodeType === 9) && (!reg || isReg && reg.test(node.tagName.toLowerCase()) || isStr && node.tagName.toLowerCase() === reg)) {
                        result.push(node);
                    }//end of if
                }//end of for
                return result;
            };
        var createPostDirectory = function (article, directory, isDirNum) {
            var contentArr = [], titleId = [], levelArr, root, level, currentList, list, li, link, i, len;
            levelArr = (function (article, contentArr, titleId) {
                var titleElem = articleChildren(article.childNodes, /^h\d$/), levelArr = [], lastNum = 1, lastRevNum = 1,
                    count = 0, guid = 1, id = 'directory' + (Math.random() + '').replace(/\D/, ''), lastRevNum, num, elem;
                while (titleElem.length) {
                    elem = titleElem.shift();
                    //console.log("titleElem:", elem);
                    contentArr.push(elem.innerHTML);
                    num = +elem.tagName.match(/\d/)[0];
                    if (num > lastNum) {
                        levelArr.push(1);
                        lastRevNum += 1;
                    } else if (num === lastRevNum ||
                        num > lastRevNum && num <= lastNum) {
                        levelArr.push(0);
                        lastRevNum = lastRevNum;
                    } else if (num < lastRevNum) {
                        levelArr.push(num - lastRevNum);
                        lastRevNum = num;
                    }
                    count += levelArr[levelArr.length - 1];
                    lastNum = num;
                    elem.id = elem.id || (id + guid++);
                    titleId.push(elem.id);
                }
                if (count !== 0 && levelArr[0] === 1) levelArr[0] = 0;
                return levelArr;
            })(article, contentArr, titleId);
            currentList = root = document.createElement('ul');
            if(!currentList)return;
            dirNum = [0];
            //console.log("titleId:", titleId);
            for (i = 0, len = levelArr.length; i < len; i++) {
                level = levelArr[i];
                if (level === 1) {
                    list = document.createElement('ul');
                    if (!currentList.lastElementChild) currentList.appendChild(document.createElement('li'));
                    currentList.lastElementChild.appendChild(list);
                    currentList = list;
                    dirNum.push(0);
                } else if (level < 0) {
                    level *= 2;
                    while (level++) {
                        if (level % 2) dirNum.pop();
                        currentList = currentList.parentNode;
                    }
                }
                dirNum[dirNum.length - 1]++;
                li = document.createElement('li');
                link = document.createElement('a');
                link.href = '#' + titleId[i];
                var htmlEleStr = (!isDirNum ? contentArr[i] : dirNum.join('.')) + ' ' + contentArr[i];
                var isFirstLevel = 1 == dirNum.length
                //console.log("menuItem:", level, "===>", dirNum, isFirstLevel, htmlEleStr);
                if(isFirstLevel)link.style.fontWeight = 'bold';
                link.innerHTML = htmlEleStr.replace("<a", isFirstLevel ? "<b" : "<text").replace("</a>", isFirstLevel ? "</b>" : "</text");
                li.appendChild(link);
                li.style.paddingTop = '10px';
                li.style.paddingLeft = (dirNum.length * 5) + 'px';
                $(li).click(function(event){
                    event.stopPropagation();
                    if(curSelectLiId){
                        $("a[href='"+curSelectLiId+"']").removeClass("active");
                        $("a[href='"+curSelectLiId+"'] > b").removeClass("active");
                        $("a[href='"+curSelectLiId+"'] > text").removeClass("active");
                    }//end of if
                    curSelectLiId = $(this).children("a").attr("href")
                    console.log("menuItem:", "==>" + curSelectLiId + "==>" + (curSelectLiId ? $("a[href='"+curSelectLiId+"']").text() : "Null"));
                    $("a[href='"+curSelectLiId+"']").addClass("active");
                    $("a[href='"+curSelectLiId+"'] > b").addClass("active");
                    $("a[href='"+curSelectLiId+"'] > text").addClass("active");
                })
                currentList.appendChild(li);
            }//enf of for
            directory.appendChild(root);
        };
        createPostDirectory(document.getElementById('article-content'), document.getElementById('menu-sidebar'), true);
    };

    layui.use(['layer', 'element', 'form'], function(){
        $('#updateRecordSdkDl').on('click', function(){
            getSdkZipRecordList(function(sdkZipRecordList){
                var contentHtmlStr = '<ul class="layui-timeline">'
                $.each(sdkZipRecordList, function(index, item){
                    contentHtmlStr += '<li class="layui-timeline-item">'+
                        '<i class="layui-icon layui-timeline-axis">&#xe63f;</i>'+
                        '<div class="layui-timeline-content layui-text">'+
                            '<div style="display: flex;align-items: center;">'+
                                '<h3 class="layui-timeline-title">'+
                                    '<span dlUrl="'+item.url+'">版本：'+item.version+'</span>'+
                                    '<i data-feather="download" style="width: 20px; height: 15px; color: #1E9FFF; cursor: pointer; margin-left: 10px" class="sdkRecordDownload" dlUrl="'+item.url+'"></i>'+
                                    '<span style="color: gray;font-weight: 200;">【'+item.url+'】</span>'+
                                '</h3>'+
                            '</div>'+
                            '<i><h5 style="color:gray">构建日期：'+item.date+'</h5></i>'+
                            '<p>更新描述：'+item.desc+'</p>'+
                        '</div>'+
                    '</li>'
                })
                contentHtmlStr += '</ul>'
                layer.open({ title: ["更新记录/SDK下载["+sdkZipRecordList.length+"条]", 'font-size: 16px;'], type: 1, anim: 4, maxmin: false, resize: false, scrollbar: false, isOutAnim: true, closeBtn: 1,
                    content: "<div style='padding: 20px;'>" + contentHtmlStr + "</div>",
                    area: ['320px', '195px'], // 初始宽高
                    success: function(layero, index){
                        layer.full(index); // 最大化
                        feather.replace()//icon show
                        layero.find(".sdkRecordDownload").click(function(event){
                            event.stopPropagation();
                            checkDownloadSdkFile($(this).siblings("span").attr("dlUrl"));
                        })
                    }
                })
            })
        })

        function getSdkZipRecordList(callback){
          var loading = layer.load(2)
          $.ajax({
            type: "GET",
            url: serverDomainUrl+":5000/getSdkZipRecordList",
            data: { strategy: curStrategyFlag },
            success: function (data) {
              layer.close(loading)
              var sdkZipRecordList = JSON.parse(data)
              if(!sdkZipRecordList || sdkZipRecordList.length <= 0){
                layer.alert('暂无SDK更新记录，请等待构建', {skin: 'layui-layer-molv',closeBtn: 0,anim: 4});
                return
              }//end of if
              callback(sdkZipRecordList)
            },
            error: function (err, err1, err2) {
              layer.close(loading)
              layer.confirm('获取更新记录异常，请重试', {btn: ['重试'], yes: function(index, layero){ getSdkZipRecordList() }})
            }
          })
        }

        function checkDownloadSdkFile(downFileUrl) {
          console.log("====checkDownloadSdkFile=>", downFileUrl)
          if(!downFileUrl || downFileUrl.length <= 0){
            layer.alert('待下载的链接为空,请重试!', {skin: 'layui-layer-molv',closeBtn: 0,anim: 4});
            return
          }//end of if
          var flag = window.open(downFileUrl, "_blank")
          if (!flag) {
              layer.alert('检测到你的浏览器阻止了弹窗下载,请在地址栏查看并允许弹窗操作,请先允许完成后再点击确定按钮重试一次', {
                  skin: 'layui-layer-molv', closeBtn: 0, anim: 4}, function () {
                    checkDownloadSdkFile(downFileUrl)
              });
          } else {
            layer.closeAll('dialog')
            console.log('执行下载命令正确执行返回了!')
          }
        }
    })

    //init
    if(serverDomainUrl.toLowerCase().startsWith("file://"))serverDomainUrl = "http://xxx.30.14.122"
    articleDirectoryBuild();
    feather.replace()//icon show
</script>
</html>